<template>
  <div class="app-container">
    <div class="dashboard-header">
      <h1>吏简合同管理平台</h1>
    </div>

    <div class="stats-grid">
      <!-- 用户统计 -->
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon user-icon">
            <SvgIcon icon-class="user" size="2em" />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ userCount }}</div>
            <div class="stat-label">用户总数</div>

          </div>
        </div>
      </el-card>

      <!-- 合同统计 -->
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon contract-icon">
            <SvgIcon icon-class="document" size="2em" />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ contractCount }}</div>
            <div class="stat-label">合同总数</div>

          </div>
        </div>
      </el-card>

      <!-- 收入统计 -->
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon revenue-icon">
            <SvgIcon icon-class="pv" size="2em" />
          </div>
          <div class="stat-info">
            <div class="stat-number">¥{{ totalRevenue }}</div>
            <div class="stat-label">总收入</div>

          </div>
        </div>
      </el-card>

      <!-- 项目统计 -->
      <!-- <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon project-icon">
            <SvgIcon icon-class="project" size="2em" />
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ projectCount }}</div>
            <div class="stat-label">项目总数</div>

          </div>
        </div>
      </el-card> -->
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h3>快速操作</h3>
      <div class="action-buttons">
        <el-button type="primary" :icon="Plus" @click="handleAddUser">新增用户</el-button>
        <!-- <el-button type="success" :icon="Document">创建合同</el-button>
        <el-button type="warning" :icon="Monitor">查看报表</el-button> -->
        <el-button type="info" :icon="Setting" @click="handleSystemSetting">系统设置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Plus, Document, Monitor, Setting } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import UserAPI from "@/api/user";

const router = useRouter();

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

// 统计数据
const totalRevenue = ref()
const userCount = ref()
const projectCount = ref()
const contractCount = ref()

// 格式化收入数字
const formatRevenue = (value: number) => {
  if (value >= 10000) {
    return (value / 10000).toFixed(1) + "万";
  }
  return value.toLocaleString();
};

// 新增用户
const handleAddUser = () => {
  router.push("/user");
};

// 系统设置
const handleSystemSetting = () => {
  router.push("/setting");
};

const getData = async () => {
  let res = await UserAPI.statistics();
  console.log(res);
  if (res.code === 200) {
    userCount.value = res.data.userCount
    totalRevenue.value = res.data.totalRevenue
    projectCount.value = res.data.projectCount
    contractCount.value = res.data.contractCount
  }
}


// 模拟数据加载
onMounted(() => {
  // 这里可以调用API获取真实数据
  getData();
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;

  h1 {
    font-size: 2.5em;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 300;
  }

  .subtitle {
    color: #7f8c8d;
    font-size: 1.1em;
    margin: 0;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
  }

  :deep(.el-card__body) {
    padding: 24px;
  }
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &.user-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  &.contract-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
  }

  &.revenue-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
  }

  &.project-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
  }
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 2.2em;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.95em;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 0.85em;

  &.positive {
    color: #27ae60;
  }

  &.negative {
    color: #e74c3c;
  }

  .trend-text {
    margin-left: 4px;
    color: #95a5a6;
  }
}

.quick-actions {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;

  h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-weight: 500;
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  .el-button {
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 500;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }

  .stat-content {
    gap: 15px;
  }

  .stat-icon {
    width: 50px;
    height: 50px;
  }

  .stat-number {
    font-size: 1.8em;
  }
}
</style>
